<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
        <!--
          常用样式
            1、标题
              bootstrap对h1~h6的标题效果进行覆盖
              提供了对应的类名，为非标题元素设置样式  .h1~.h6
              副标题 small标签 或 .small类名
            2、段落
              通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理)
              <small>:小号字
              <b><strong>:加粗
              <i><em>:斜体
            3、定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明如下:
              .text-muted:提示，使用浅灰色(#999)
              .text-primary:主要，使用蓝色(#428bca)
              .text-success:成功，使用浅绿色(#3c763d)
              .text-info:通知信息，使用浅蓝色(#31708f)
              .text-warning:警告，使用黄色(#8a6d3b)
              .text-danger:危险，使用褐色(#a94442)
            4、对齐效果
              Bootstrap通过定义四个类名来控制文本的对其风格:
                .text-left:左对齐
                .text-center :居中对齐
                .text-right:右对齐
                text-justify:两端对齐
        -->


    <!--标题-->
    <h1>标题1<small>副标题</small></h1>
    <h2>标题2<span class="small">副标题</span></h2>
    <h3>标题3</h3>
    <div class="h1">你好</div>

        <hr>

    <!--段落-->
    <p>通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理)</p>
    <p class="lead">通过.lead 来突出<small>强调</small><b>内容</b>(其作用就是<em><strong>增大</strong></em>文本字号，加粗<i>文本</i>，而且对行高和margin也做相应的处理)</p>

        <hr>

    <!--强调-->
    <div class="text-muted">.text-muted:提示，使用浅灰色(#999)</div>
    <div class="text-primary">.text-primary:主要，使用蓝色(#428bca)</div>
    <div class="text-success">.text-success:成功，使用浅绿色(#3c763d)</div>
    <div class="text-info">.text-info:通知信息，使用浅蓝色(#31708f)</div>
    <div class="text-warning">.text-warning:警告，使用黄色(#8a6d3b)</div>
    <div class="text-danger">.text-danger:危险，使用褐色(#a94442)</div>

        <hr>

    <!--对其效果-->
    <p style="text-align: right">Bootstrap通过定义四个类名来控制文本的对其风格:</p><!--以前的-->
    <p class="text-left">左对齐 - Bootstrap通过定义四个类名来控制文本的对其风格:</p>
    <p class="text-right">右对齐 - Bootstrap通过定义四个类名来控制文本的对其风格:</p>
    <p class="text-center">居中对齐 - Bootstrap通过定义四个类名来控制文本的对其风格:</p>

    <p><!--没有两端对齐-->
      Hello 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)
      hi 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)
      网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)
      网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)
      网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)
    </p>
        <hr>
    <p class="text-justify"><!--两端对齐-->
      Hello 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)
      hi 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)
      网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)
      网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)
      网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)
    </p>
</body>
</html>